<template>
  <div>
    <div class="comment_con">
      <router-link
        tag="a"
        :to="{path:item.commentator===username?'/usercenter':'/centerT',query:{id:item.commentator}}"
      >
        <el-avatar size="large" fit="fill" :src="imgUrl" style="margin-right:5px;"></el-avatar>
      </router-link>
      <div class="con">
        <div class="user">{{item.commentator}}&nbsp;回复于&nbsp;{{item.commDate}}</div>
        <div class="content">{{item.content}}</div>
      </div>
      <i :class="starCl" @click="is_star=!is_star"></i>
      <span>{{item.praiseCount}}</span>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '',
      starCl: 'iconfont icon-dianzan', // 点赞的样式
      is_star: '', // 点赞
      star_sign: '' // 初始点赞的状态
    }
  },
  props: ['item', 'username'],
  created() {
    this.comm.getuserImg(this.item.commentator).then(data => {
      this.imgUrl = data
    })
    // console.log(this.item)
    var praiseCount = this.item.praisePerson.length
    this.item.praiseCount = praiseCount
    if (praiseCount) {
      var index = this.item.praisePerson.findIndex(i => {
        return i === this.username
      })
      this.is_star = index !== -1 ? true : false
      this.star_sign = index !== -1 ? true : false
    } else {
      this.is_star = false
      this.star_sign = false
    }
  },
  methods: {
    // 增加减少点赞量
    async updatePost(option, praisePerson) {
      const res = await this.$http.post('/updatePost', {
        _id: this.item._id,
        msg: option,
        [praisePerson]: this.username,
        type: 'comment'
      })
      if (res.meta.status !== 200) {
        return this.$Message.error('服务器出现错误')
      }
      var noticeMsg =
        option === 'praiseCountAdd'
          ? '点赞你的评论'
          : '取消点赞你的评论'
      var integ = option === 'praiseCountAdd' ? 1 : -1
      this.comm
        .editInteg(
          this.item.commentator,
          'integ.parise',
          integ,
          this.username,
          noticeMsg,
          this.item._id
        )
        .then(data => {
          if (!data) {
            return this.$Message.error('服务器出错！')
          }
        })
    }
  },
  watch: {
    // 监控点赞的变化
    is_star: function(val, oval) {
      this.starCl = val
        ? 'iconfont icon-dianzan starOn'
        : 'iconfont icon-dianzan'
      if (oval !== '') {
        this.item.praiseCount = val
          ? this.item.praiseCount + 1
          : this.item.praiseCount - 1
      }
    }
  },
  beforeDestroy() {
    // 判断点赞的变化，如果改变则发起请求
    if (this.is_star !== this.star_sign) {
      // 点赞时加量，加姓名
      if (this.is_star) {
        return this.updatePost('praiseCountAdd', 'praisePerson')
      }
      // 取消点赞，减量，减姓名
      this.updatePost('praiseCountRed', 'praisePerson')
    }
  }
}
</script>
<style lang="less" scoped>
.comment_con {
  display: flex;
  width: 100%;
  .con {
    margin-top: 10px;
    width: 90%;
    .user {
      font-size: 14px;
      color: #8e94ab;
    }
    .content {
      width: 80%;
      height: 50px;
      margin-top: 10px;
      font-size: 15px;
    }
  }
  i {
    margin: 10px 5px 0 0;
    font-size: 20px;
  }
  span {
    margin: 10px 15px 0 0;
  }
}
.el-divider--horizontal {
  margin: 10px 0;
}
.starOn {
  color: red;
}
</style>
